<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-08-04 15:06:01
 * @FilePath: \tmsadmin\src\views\home\components\list.vue
-->

<template>
  <SearchForm @search="searchFun" style="margin-bottom: 20px" />
  <el-card class="page_card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="left">
          运单管理
          <el-button style="margin-left: 20px" type="primary" @click="ImportOrder()">
            导入运单
          </el-button>
          <!-- 按钮组 -->
          <el-button @click="edit('配置车辆')" style="margin-left: 20px">
            配置车辆
          </el-button>
          <el-button type="success" @click="edit('查看详情')" style="margin-left: 20px">
            查看详情
          </el-button>
          <el-button type="warning" @click="edit('编辑')" style="margin-left: 20px">
            编辑
          </el-button>
          <el-button type="danger" @click="edit('删除')" style="margin-left: 20px">
            删除
          </el-button>
        </div>
        <div class="right">
          <el-button type="primary" @click="exportTable" style="margin-right: 20px">
            导出数据
          </el-button>
          <el-button circle @click="refreshFun">
            <i class="icon ion-refresh" :class="iconRefresh" />
          </el-button>
        </div>
      </div>
    </template>
    <Table :table-data="tableData" :table-columns="columns" :page-size="pageSize" :page-num="pageNum" :loading="loading"
      :total="total" @selectionChange="selectionChange" @change="changePage" @ok="getData()" />

    <setCarNum @ok="getData()" ref="setCarNumRef"></setCarNum>
    <editModal @ok="getData()" ref="editModalRef"></editModal>
    <Modal @ok="getData()" ref="modalRef"></Modal>
  </el-card>
</template>
<script lang="ts" setup>
import { REQUEST } from '@/api/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import SearchForm from './search.vue'
import Table from './table.vue'
import Modal from './modal.vue'
import setCarNum from './setCarNum.vue'
import editModal from './editModal.vue'
import { onMounted, ref } from 'vue'
const emits = defineEmits(['go'])

const setCarNumRef = ref(null)
const editModalRef = ref(null)

const queryForm = ref({})
const iconRefresh = ref('')
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const modalRef = ref(null)
const loading = ref(false)
const tableData = ref([])
const columns = ref([
  {
    title: '收货人全称',
    prop: 'consignee',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '200'
  },
  {
    title: '收货人ID',
    prop: 'consigneeId',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '发运订单',
    prop: 'shippingOrder',
    align: 'center',
    modifiable: true,
    isShow: true,
    tooltip: false,
    minwidth: '280'
  },
  {
    title: '预计发货日期',
    prop: 'deliveryTime',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
{
    title: '运单状态',
    prop: 'state',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '车牌号',
    prop: 'plateNumber',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  }
  
])
onMounted(() => {
  getData()
})
const ImportOrder = () => {
  modalRef.value.openModal()
}
const getData = () => {
  console.log(queryForm.value)
  loading.value = true
  REQUEST.POST('ORDERLIST', {
    pageNumber: pageNum.value,
    pageSize: pageSize.value,
    ...queryForm.value
  }).then((res: any) => {
    tableData.value = res.data.records
    total.value = JSON.parse(res.data.total)
    loading.value = false
  })
}
const refreshFun = () => {
  iconRefresh.value = 'iconRefresh'
  getData()
  setTimeout(() => {
    iconRefresh.value = ''
  }, 1000)
}
const searchFun = (e: any) => {
  queryForm.value = e
  getData()
}
const selectList = ref([])
const selectionChange = (e: any) => {
  selectList.value = e
}
const edit = (title: any) => {
  if (selectList.value.length > 0) {
    if (title == '配置车辆') {
      const ids = selectList.value.map((el: any) => {
        return el.id
      })
      setCarNumRef.value.openModal({ row: ids, title: title })
    } else if (title == '编辑') {
      if(selectList.value.length === 1) {
        editModalRef.value.openModal({ row: selectList.value[0], title: title })
      }else{
        ElMessage.error('只允许编辑单条数据！')
      }
    } else if (title == '查看详情') {

      const ids = selectList.value.map((el: any) => {
        return el.id
      })
      emits('go', { view: 'ActiveDetails', params: { row: { id: ids } }, title: title })
    }else if(title == '删除'){
      const ids = selectList.value.map((el: any) => {
        return el.id
      })
      ElMessageBox.confirm('您将进行删除操作，请确认', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        console.log(selectList.value)
        REQUEST.POST('ORDERDEL', { ids: ids }).then((res: any) => {
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '成功删除'
            })
            getData()
          } else {
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        })
      })
    }
  } else {
    ElMessage.warning('请勾选数据！')
  }

}
const changePage = (e: any) => {
  pageNum.value = e.pageNum
  pageSize.value = e.pageSize
  getData()
}
const exportTable = ()=>{
  REQUEST.POSTS('EXPORTTABLE',{pageNumber: pageNum.value, pageSize: pageSize.value,...queryForm.value}).then((res: any) => {
   console.log(res,'999999')
    downloadSource(res);
  })
}

const downloadSource = (res: any) => {
  let url =(window.URL || window.webkitURL).createObjectURL(new Blob([res], { type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}));
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', `运单列表.xlsx`);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
